<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<!--<div id="root">-->
<!--<table>-->
<!--<tbody>-->
<!--<tr is="row"></tr>-->
<!--<tr is="row"></tr>-->
<!--<tr is="row"></tr>-->
<!--</tbody>-->
<!--</table>-->

<!--</div>-->

<div id="root">
    <!--<div ref="hello"-->
    <!--@click="handleClick">hello world-->
    <!--</div>-->

    <counter ref="one" @change="handleChange"></counter>
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>

<script>
    // Vue.component('row', {
    //     data: function () {
    //         return { content: 'this is row' }
    //     },
    //     template: '<tr><td>{{content}}</td></tr>'
    // })

    Vue.component('counter', {
        template: '<div @click="handleClick">{{number}}</div>',
        data: function () {
            return {
                number: 0
            }
        },
        methods: {
            handleClick: function () {
                /*       alert('click')*/
                this.number++
                this.$emit('change')
            }
        }
    })

    var vm = new Vue({
        el: '#root',
        methods: {
            handleClick: function () {
                /*       alert('click')*/
                console.log(this.$refs.hello.innerHTML);
            },
            handleChange: function () {
                console.log(this.$refs.one.number);
                console.log(this.$refs.two.number);
                this.total = this.$refs.one.number + this.$refs.two.number;
            }
        },
        data: {
            total: 0
        }

    })


</script>
</body>
</html>